<!--  -->
<template>
  <div class="app">
    <div class="flex mb-30">
      <div class="btn-back" @click="routerGoTo('MemberDetail')">
        <i class="el-icon-back"></i> 返回
      </div>
      <div class="line"></div>
      <div class="name">实名信息</div>
    </div>

    <div class="main_content">
      <div class="content_item" v-for="(value, key) in mainConTit" :key="key">
        <template v-if="key == '标签'">
          {{ key + " : " }}
          <el-tag v-for="item in value" :key="item.name" v-text="item.name"></el-tag>
        </template>

        <template v-else>
          {{ key }} : <span v-html="value"></span>
          <!-- {{key + " : " + value}} -->
        </template>
      </div>
    </div>

    <div class="mb-30"></div>

    <div class="IDcard">
        <div class="item">
            <div class="item_tit">畢業證照片</div>
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="item_tit">身份證正面照</div>
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="item_tit">身份證背面照</div>
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="item_tit">手持身份证照</div>
            <div class="img"></div>
        </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      userData: [],
      mainConTit: {
        真实姓名: "",
        性别: "",
        住址: "",
        年龄: "",
        毕业院校: "",
        生日: "",
        身份证号码: "",
        职业: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    routerGoTo(val) {
      this.$router.push({
        name: val,
        params:{
          id:this.$route.params.id
        }
      });
    },
    async sendRequest() {
      await this.$request.get(`/member/${this.$route.params.id}/detail`).then((res) => {
        console.log(res);
        this.userData = res.data.data;
        this.mainConTit = {
          真实姓名: "",
          性别: "",
          住址: "",
          年龄: "",
          毕业院校: "",
          生日: "",
          身份证号码: "",
          职业: "",
        };
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.sendRequest()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.app {
  padding: 30px;
  border-radius: 15px;
  background-color: #fff;
  .btn-back {
    &:hover {
      color: #3ca7fa;
      cursor: pointer;
    }
  }
  .mt-30{
    margin-top: 30px;
  }
  .ml-20 {
    margin-left: 20px;
  }
  .mr-20 {
    margin-right: 20px;
  }
  .mb-30 {
    margin-bottom: 30px;
  }
  .line {
    width: 1px;
    height: 14px;
    background-color: #d8d8d8;
    margin-right: 15px;
    margin-left: 15px;
  }
  .flex {
    width: 100%;
    display: flex;
  }
  .flex-spaceCenter {
    justify-content: center;
  }
  .flex-spaceBetween {
    justify-content: space-between;
  }
  .flex-alignCenter {
    align-items: center;
  }
  div.main_content {
    border-top: 1px solid #f3f6f9;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    padding: 30px 0;
    div.content_item {
      display: flex;
      flex-wrap: wrap;
      flex-basis: 20%;
      height: auto;
      min-height: 60px;
    }
  }
  div.IDcard {
    display: flex;
    border-radius: 15px;
    background-color: #fff;
    padding: 30px;
    
  div.item {
    width: 262px;
    height: 184px;
    display: flex;
    flex-direction: column;

    div.item_tit {
        margin-bottom: 20px;
    }

    div.img {
        width: 200px;
    height: 150px;
    background: #f0f0f8;
    border-radius: 8px;
    }
  }
}
  
}
</style>
